<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./index.css">
</head>

<body>
  <div class="container">
    <div class="iphone">
      <div class="header">
        <div class="order-summary">
          <div class="order-status">Arriving date</div>
          <div class="order-date">
            19 April, 2023
          </div>
          <div class="order-day">
            Friday
          </div>
        </div>
        <div class="action-btn">
          <div class="back-btn"><i class="far fa-long-arrow-left"></i></div>
        </div>
      </div>
      <div class="hero-img-container">
        <div class="triangle1"></div>
        <div class="arc"></div>
        <div class="pattern"></div>
        <img src="https://drive.google.com/uc?id=15iXUI6DkRr5Zcp0yH5uF2U47ycr-WzUY" class="hero-img">
      </div>
      <div class="order-status-container">
        <div class="status-item first">
          <div class="status-circle"></div>
          <div class="status-text">
            today
          </div>
        </div>
        <div class="status-item second">
          <div class="status-circle"></div>
          <div class="status-text">
            Shipped
          </div>
        </div>
        <div class="status-item">
          <div class="status-circle"></div>
          <div class="status-text green">
            <span>Out</span><span>for delivery</span>
          </div>
        </div>
        <div class="status-item">
          <div class="status-circle"></div>
          <div class="status-text green">
            <span>Ariving</span>
            <span>03&nbsp;-&nbsp;21</span>
          </div>
        </div>
      </div>
      <div class="order-details-container">
        <div class="odc-header">
          <div class="cta-text">See your product details</div>
          <div class="cta-button-container">
            <button class="cta-button">View</button>
          </div>
        </div>
        <div class="odc-wrapper">
          <div class="odc-header-line">
            Your order details
          </div>
          <div class="odc-header-details">
            Your product details (order 040-904-790)
          </div>
          <div class="product-container">
            <div class="product">
              <div class="product-photo">
                <img src="https://s3.eu-central-1.amazonaws.com/sneakerjagers.com/products/396x396/92074.jpg"
                  class="img-photo">
              </div>
              <div class="product-desc">
                <span>Nike Air Jordan 1</span>
                <span>9740 INR</span>
              </div>
            </div>
            <div class="product">
              <div class="product-photo">
                <img src="https://s3.eu-central-1.amazonaws.com/sneakerjagers.com/products/396x396/77674.jpg"
                  class="img-photo">
              </div>
              <div class="product-desc">
                <span>Alex rider: Never say die Novel 12</span>
                <span>655 INR</span>
              </div>
            </div>
          </div>
          <a href="order-cancellationReqtoken12.netlify.app">
            <div class="cancellation">
              Request Cancellation
            </div>
          </a>



          <div class="shipping-desc">Your Shipping Address</div>

          <div class="shipping-address">
            Mahagun Moderne<br>
            DELHI<br>
            201305<br>
            GAUTAM BUDH NAGAR, GHAZIABAD
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>